vue项目每30秒刷新1次接口获取数据

您所在的位置:网站首页 vue 强制刷新 vue项目每30秒刷新1次接口获取数据

vue项目每30秒刷新1次接口获取数据

2023-03-12 22:34| 来源: 网络整理| 查看: 265

在vue.js项目中,我们经常会需要实现轮询,即对数据实时更新的这种需求:每隔xx秒需要刷新一次接口刷新数据。如:每隔30秒请求一次数据

这时候我们就需要用到定时器相关的原理。

我们可以先看看2种常用定时器:

setinterval(function(){}, seconds)——隔seconds调用一次函数

settimeout(function(){}, seconds)——只执行函数一次

这么看的话,setinterval会符合我们的业务需求。然而这里也会有些问题:

如果你单纯的使用setinterval的话,会导致页面卡死!

其原因与js引擎线程有关,简单来说就是setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死网页。

但是settimeout是自带清除定时器的,因此正确解决方法如下:

window.setInterval(() => {

 setTimeout(fun, 0)

}, 30000)

// 这里的30000为多少秒刷新的时间

 注意:setinterval必须放在外层(在内层会导致页面卡顿直到崩溃),内层配合settimeout(主要是setTimeout是自带清除定时器),即可无限次调用我们的接口啦!



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3